<template>
  <a-layout>
    <a-layout-content :style="{
      background: '#fff',
      padding: '24px',
      margin: 0,
      minHeight: '280px',
    }">
      <p>
        <a-form layout="inline" :model="param">
          <a-form-item>
            <a-button type="primary" @click="handleQuery()">
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="add()"> 新增 </a-button>
          </a-form-item>


        </a-form>
      </p>
      <a-table :pagination="false" :columns="columns" :row-key="(record) => record.id" :data-source="level1"
        :loading="loading">
        <template #cover="{ text: cover }">
          <img v-if="cover" :src="cover" alt="avatar" />
        </template>
        <template v-slot:action="{ text, record }">
          <a-space size="small">
            <a-button type="primary" @click="edit(record)"> 编辑 </a-button>

            <a-popconfirm title="删除后不可恢复,确认删除?" ok-text="确认" cancel-text="取消" @confirm="handeleDelete(record.id)">
              <a-button type="primary" danger> 删除 </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>
  <!-- 模态框组件 -->
  <a-modal title="分类表单" v-model:visible="modalVisible" :confirm-loading="modalLoading" @ok="handleModalOk" ok-text="确认"
    cancel-text="取消">
    <!-- 表单组件 -->
    <a-form :model="category" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">

      <a-form-item label="名称">
        <a-input v-model:value="category.name" />
      </a-form-item>
      <a-form-item label="父分类">
        <a-select v-model:value="category.parent" ref="select">
          <a-select-option :value="0">
            无
          </a-select-option>
          <a-select-option v-for="c in level1" :key="c.id" :value="c.id" :disabled="category.id === c.id">
            {{ c.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="顺序">
        <a-input v-model:value="category.sort" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import axios from "axios";
import { Tool } from "@/util/tool";

export default defineComponent({
  name: "AdminCategory",
  setup() {
    // 查询参数
    const param = ref();
    param.value = {};
    const categorys = ref();

    const loading = ref(false);

    const columns = [

      {
        title: "名称",
        dataIndex: "name",
        align: 'center'
      },
      {
        title: "父分类",
        key: "parent",
        dataIndex: "parent",
        align: 'center'
      },

      {
        title: "顺序",
        dataIndex: "sort",
        align: 'center'
      },

      {
        title: "操作",
        key: "action",
        slots: { customRender: "action" },
        align: 'center'
      },
    ];

    /**
     * 数据查询
     **/
    const handleQuery = () => {
      loading.value = true;
      // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
      level1.value = [];
      axios
        .get("/category/all")
        .then((response) => {
          loading.value = false;
          const data = response.data;
          if (data.success) {
            categorys.value = data.content;
            console.log("原始数组:", categorys.value);
            level1.value = [];
            level1.value = Tool.array2Tree(categorys.value, 0)
            console.log("树形结构:", level1);

          } else {
            message.error(data.message);
          }
        });
    };

    /**
   * 一级分类树，children属性就是二级分类
   * [{
   *   id: "",
   *   name: "",
   *   children: [{
   *     id: "",
   *     name: "",
   *   }]
   * }]
   */
    const level1 = ref(); // 一级分类树，children属性就是二级分类




    // -------- 表单 ---------
    const category = ref({}); //表单组件
    const modalVisible = ref<boolean>(false);
    const key = "updatable";
    const modalLoading = ref<boolean>(false);
    const handleModalOk = () => {
      modalLoading.value = true;

      axios.post("/category/save", category.value).then((res) => {
        modalLoading.value = false;
        const data = res.data;
        if (data.success) {
          // 提示框
          message.loading({ content: "正在执行中...", key });
          setTimeout(() => {
            modalVisible.value = false;

            message.success({ content: "请求成功！", key, duration: 2 });
            // 重新加载列表
            handleQuery();
          }, 1000);
        } else {
          message.error(data.message);
        }
      });
    };



    /*
     * 编辑
     */
    const edit = (record: any) => {
      modalVisible.value = true;
      // 进行对象拷贝（深拷贝）从而不影响record本身
      category.value = Tool.copy(record);
    };

    /* 新增 */
    const add = () => {
      modalVisible.value = true;
      category.value = {};
    };

    /* 删除 */
    const handeleDelete = (id: number) => {
      axios.delete(`/category/delete/${id}`).then((res) => {
        const data = res.data; //commonResp
        if (data.success) {
          //重新加载列表
          handleQuery();
        }
      });
    };

    onMounted(() => {
      handleQuery();
    });

    return {
      param,
      // categorys,
      level1,
      columns,
      loading,

      edit,
      add,
      handeleDelete,
      handleQuery,

      modalVisible,
      modalLoading,
      handleModalOk,
      category,
    };
  },
});
</script>

<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>
